<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        html,
        body {
            height: 100%;
            background-color: #FAF9F9;
        }

        .wrap {
            width: 100%;
            overflow: hidden;
        }

        .head {
            width: 100%;
            padding: 0 15px;
            background: #fff;
            margin-top: 10px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .head_inner {
            width: 100%;
            height: 100px;
            border-radius: 10px;
            /*background: red;*/
            background: url(../../image/order_details_bg.png) no-repeat;
            background-size: 100% 100%;
        }

        .head_inner .title {
            width: 100%;
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            padding-left: 16px;
            box-sizing: border-box;
            margin-top: 20.5px;
            float: left;
        }

        .amount {
            width: 100%;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

        .amount_left {
            width: auto;
            max-width: 63px;
            overflow: hidden;
        }

        .amount_left_t {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 13px;
            text-align: center;
            margin-top: 25.5px;
        }

        .amount_left_b {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 13px;
            text-align: center;
            margin-top: 8px;
        }

        .order_tab {
            width: 100%;
            overflow: hidden;
            padding: 0 100px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
        }

        .order_tab div {
            width: 100%;
            height: 30px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 30px;
            text-align: center;
        }

        .order_tab_t {
            color: #FF3638!important;
            font-weight: bold;
        }

        .order_list {
            width: 100%;
            overflow: hidden;
            padding: 0 15px;
            box-sizing: border-box;
        }

        .order_list ul {
            width: 100%;
            overflow: hidden;
        }

        .order_list ul li {
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #fff;
            border-radius: 10px;
            padding-top: 14px;
            padding-bottom: 11px;
        }

        .order_list ul li .order_t {
            display: flex;
        }

        .order_list ul li .order_t div.order_number {
            width: auto;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .order_list ul li .order_t div.order_copy {
            width: 45px;
            height: 18px;
            line-height: 18px;
            background: #EFF1F7;
            border-radius: 9.5px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: 10px;
            text-align: center;
        }

        .order_list ul li .order_t div.order_status {
            width: auto;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            margin-left: auto;
        }

        .order_info {
            width: 100%;
            overflow: hidden;
            display: flex;
            margin-top: 8px;
        }

        .order_info .shop_picture {
            width: 56px;
            height: 56px;
            border-radius: 10px;
        }

        .order_info .shop_picture img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .order_info .shop_info {
            width: 100%;
            overflow: hidden;
            padding-left: 4px;
            box-sizing: border-box;
            flex: 1;
        }

        .order_info .shop_info .shop_name {
            width: auto;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .order_info .shop_info .create_time {
            width: auto;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 5px;
        }

        .order_money {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            margin-top: 21px;
        }

        .order_money div {
            width: auto;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 13px;
        }
        /*.order_tab div:last-child{
          text-align: center;
        }*/
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="head">
                <div class="head_inner">
                    <div class="title">预估有效订单</div>
                    <div class="amount">
                        <div class="amount_left">
                            <div class="amount_left_t">0</div>
                            <div class="amount_left_b">有效订单(笔)</div>
                        </div>
                        <div class="amount_left">
                            <div class="amount_left_t">0</div>
                            <div class="amount_left_b">总金额(元)</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="order_tab">
                <div :class="{'order_tab_t':isActive==index}" v-for='(item,index) in list' @click='fnhandleclick(index)'>{{item}}</div>
            </div>

            <div class="order_list">
                <ul>
                    <li v-for='item in effectiveList'>
                        <div class="order_t">
                            <div class="order_number">订单号：{{item.orderId}}</div>
                            <div class="order_copy">复制</div>
                            <div class="order_status" v-if='item.status==0'>审核中</div>
                            <div class="order_status" v-if='item.status==1'>已到账</div>
                            <div class="order_status" v-if='item.status==2'>审核失败</div>

                        </div>
                        <div class="order_info">
                            <div class="shop_picture"><img :src="item.itemImg" alt=""></div>
                            <div class="shop_info">
                                <div class="shop_name">联合利华多芬花心瓶洗发水护发素柔顺樱花无硅油470ml*2</div>
                                <div class="create_time">创建：{{item.createTime}}</div>
                            </div>
                        </div>
                        <div class="order_money">
                            <div class="order_money_l">付款金额：¥22.6</div>
                            <div class="order_money_l">预估返款：1.3</div>
                        </div>
                    </li>
                    <!-- <li>
                        <div class="order_t">
                            <div class="order_number">订单号：51212549782116985154</div>
                            <div class="order_copy">复制</div>
                            <div class="order_status">待返款</div>
                        </div>
                        <div class="order_info">
                              <div class="shop_picture"><img src="" alt=""></div>
                              <div class="shop_info">
                                   <div class="shop_name">联合利华多芬花心瓶洗发水护发素柔顺樱花无硅油470ml*2</div>
                                   <div class="create_time">创建：2020-08-13 14:23:02</div>
                              </div>
                        </div>
                        <div class="order_money">
                             <div class="order_money_l">付款金额：¥22.6</div>
                             <div class="order_money_l">预估返款：1.3</div>
                        </div>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        vm.init(0);
        vm.initRefresh();
        vm.bottomLoad();
    }
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: 0,
            offset: 0,
            list: ['有效订单', '无效订单'],
            effectiveList: []
        },
        methods: {
            init: function(isEffective, isClick) {
                if (isClick) {
                    vm.offset += 10;
                } else { // 下拉刷新 或者 初次加载
                    vm.offset = 0;
                }
                cl.openLoading();
                api.ajax({
                    url: cl.apiServer + 'zeroBuyOrder/getZeroOrderList',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token:cl.userToken
                    },
                    data: {
                        body: {
                            isEffective: isEffective,
                            limit: 10,
                            offset: vm.offset,
                            mid: cl.mid,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            cl.closeLoading();
                            if (ret.data.orderList.length >= 10) {
                                vm.effectiveList = vm.effectiveList.concat(ret.data.orderList);
                            } else if (ret.data.orderList.length < 10 && ret.data.orderList.length > 0) {
                                vm.effectiveList = vm.effectiveList.concat(ret.data.orderList);
                            } else {

                            }
                        } else {
                            cl.toast({
                                msg: ret.message
                            })
                        }
                    }
                })
            },
            //下拉刷新
            initRefresh: function() {
                cl.openRefresh(function() {
                    if (vm.isActive == 0) {
                        vm.effectiveList=[];
                        vm.init(0)
                    } else {
                        vm.effectiveList=[];
                        vm.init(1)
                    }
                })
            },
            //上拉加载
            bottomLoad: function() {
                cl.scrollBottom(function() {
                    if (vm.isActive == 0) {
                        vm.init(0, true)
                    } else {
                        vm.init(1, true)
                    }
                })
            },
            fnhandleclick: function(idx) {
                vm.isActive = idx;
                if (vm.isActive == 0) {
                    vm.effectiveList=[];
                    vm.init(0)
                } else {
                    vm.effectiveList=[];
                    vm.init(1)
                }
            },
        }
    });
</script>

</html>
